<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消費券抽獎登記系統</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', 'Microsoft JhengHei', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        header {
            background: #4e54c8;
            color: white;
            text-align: center;
            padding: 25px 20px;
            border-radius: 15px 15px 0 0;
            margin-bottom: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        header h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }
        
        header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .main-content {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 20px;
        }
        
        @media (max-width: 1100px) {
            .main-content {
                grid-template-columns: 1fr;
            }
        }
        
        .form-container, .records-container {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        }
        
        .form-section {
            margin-bottom: 30px;
        }
        
        .form-section h2 {
            font-size: 1.4rem;
            color: #4e54c8;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .bank-cards, .voucher-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
        }
        
        .bank-card, .voucher-card {
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .bank-card:hover, .voucher-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .bank-card.selected, .voucher-card.selected {
            border-color: #4e54c8;
            background-color: #f0f5ff;
        }
        
        .bank-icon {
            font-size: 2rem;
            margin-bottom: 10px;
            color: #4e54c8;
        }
        
        .voucher-amount {
            font-size: 1.8rem;
            font-weight: bold;
            color: #4e54c8;
            margin-bottom: 5px;
        }
        
        .quantity-selector {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 15px;
        }
        
        .quantity-btn {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            border: 1px solid #4e54c8;
            background: white;
            color: #4e54c8;
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .quantity-input {
            width: 50px;
            height: 35px;
            text-align: center;
            margin: 0 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1.1rem;
        }
        
        .submit-btn {
            display: block;
            width: 100%;
            padding: 16px;
            background: #4e54c8;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        
        .submit-btn:hover {
            background: #3a3eb3;
        }
        
        .records-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .records-header h2 {
            color: #4e54c8;
        }
        
        .search-box {
            display: flex;
            gap: 10px;
        }
        
        .search-box input {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 200px;
        }
        
        .records-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
        }
        
        .records-table th, .records-table td {
            padding: 10px 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        .records-table th {
            background-color: #f8f9fa;
            color: #4e54c8;
            font-weight: 600;
        }
        
        .records-table tr:hover {
            background-color: #f5f7ff;
        }
        
        .records-table .voucher {
            font-weight: bold;
            color: #4e54c8;
            text-align: center;
        }
        
        .delete-btn {
            background: #ff4757;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 6px 10px;
            cursor: pointer;
            transition: background 0.3s;
            font-size: 0.9rem;
        }
        
        .delete-btn:hover {
            background: #ff2e43;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 10px;
        }
        
        .pagination button {
            padding: 8px 15px;
            background: #4e54c8;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .pagination button:hover {
            background: #3a3eb3;
        }
        
        .pagination button.active {
            background: #2c3083;
        }
        
        footer {
            text-align: center;
            padding: 20px;
            color: white;
            margin-top: 20px;
        }
        
        @media (max-width: 600px) {
            .bank-cards, .voucher-cards {
                grid-template-columns: repeat(2, 1fr);
            }
            
            header h1 {
                font-size: 1.8rem;
            }
            
            .records-table {
                font-size: 0.8rem;
            }
            
            .records-table th, .records-table td {
                padding: 8px 6px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>每週消費券抽獎登記</h1>
            <p>請選擇您中獎的消費券和接收銀行</p>
        </header>
        
        <div class="main-content">
            <div class="form-container">
                <form id="voucherForm">
                    <div class="form-section">
                        <h2>選擇銀行</h2>
                        <div class="bank-cards">
                            <div class="bank-card" data-bank="MPay">
                                <div class="bank-icon"><i class="fas fa-mobile-alt"></i></div>
                                <div>MPay</div>
                            </div>
                            <div class="bank-card" data-bank="支付寶（澳門）">
                                <div class="bank-icon"><i class="fab fa-alipay"></i></div>
                                <div>支付寶（澳門）</div>
                            </div>
                            <div class="bank-card" data-bank="中銀">
                                <div class="bank-icon"><i class="fas fa-university"></i></div>
                                <div>中銀</div>
                            </div>
                            <div class="bank-card" data-bank="工銀">
                                <div class="bank-icon"><i class="fas fa-landmark"></i></div>
                                <div>工銀</div>
                            </div>
                            <div class="bank-card" data-bank="豐付寶">
                                <div class="bank-icon"><i class="fas fa-money-check"></i></div>
                                <div>豐付寶</div>
                            </div>
                            <div class="bank-card" data-bank="國際銀行">
                                <div class="bank-icon"><i class="fas fa-globe"></i></div>
                                <div>國際銀行</div>
                            </div>
                            <div class="bank-card" data-bank="UePay">
                                <div class="bank-icon"><i class="fas fa-credit-card"></i></div>
                                <div>UePay</div>
                            </div>
                            <div class="bank-card" data-bank="廣發">
                                <div class="bank-icon"><i class="fas fa-building"></i></div>
                                <div>廣發</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <h2>選擇消費券面額</h2>
                        <div class="voucher-cards">
                            <div class="voucher-card" data-amount="無">
                                <div class="voucher-amount">無</div>
                                <div class="quantity-selector">
                                    <button type="button" class="quantity-btn minus" data-amount="無">-</button>
                                    <input type="number" class="quantity-input" id="qty-無" value="0" min="0" max="3" readonly>
                                    <button type="button" class="quantity-btn plus" data-amount="無">+</button>
                                </div>
                            </div>
                            <div class="voucher-card" data-amount="10">
                                <div class="voucher-amount">¥10</div>
                                <div class="quantity-selector">
                                    <button type="button" class="quantity-btn minus" data-amount="10">-</button>
                                    <input type="number" class="quantity-input" id="qty-10" value="0" min="0" max="3" readonly>
                                    <button type="button" class="quantity-btn plus" data-amount="10">+</button>
                                </div>
                            </div>
                            <div class="voucher-card" data-amount="20">
                                <div class="voucher-amount">¥20</div>
                                <div class="quantity-selector">
                                    <button type="button" class="quantity-btn minus" data-amount="20">-</button>
                                    <input type="number" class="quantity-input" id="qty-20" value="0" min="0" max="3" readonly>
                                    <button type="button" class="quantity-btn plus" data-amount="20">+</button>
                                </div>
                            </div>
                            <div class="voucher-card" data-amount="50">
                                <div class="voucher-amount">¥50</div>
                                <div class="quantity-selector">
                                    <button type="button" class="quantity-btn minus" data-amount="50">-</button>
                                    <input type="number" class="quantity-input" id="qty-50" value="0" min="0" max="3" readonly>
                                    <button type="button" class="quantity-btn plus" data-amount="50">+</button>
                                </div>
                            </div>
                            <div class="voucher-card" data-amount="100">
                                <div class="voucher-amount">¥100</div>
                                <div class="quantity-selector">
                                    <button type="button" class="quantity-btn minus" data-amount="100">-</button>
                                    <input type="number" class="quantity-input" id="qty-100" value="0" min="0" max="3" readonly>
                                    <button type="button" class="quantity-btn plus" data-amount="100">+</button>
                                </div>
                            </div>
                            <div class="voucher-card" data-amount="200">
                                <div class="voucher-amount">¥200</div>
                                <div class="quantity-selector">
                                    <button type="button" class="quantity-btn minus" data-amount="200">-</button>
                                    <input type="number" class="quantity-input" id="qty-200" value="0" min="0" max="3" readonly>
                                    <button type="button" class="quantity-btn plus" data-amount="200">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <button type="submit" class="submit-btn">登記消費券</button>
                </form>
            </div>
            
            <div class="records-container">
                <div class="records-header">
                    <h2>登記紀錄</h2>
                    <div class="search-box">
                        <input type="text" placeholder="搜尋..." id="searchInput">
                        <button class="submit-btn" style="padding: 10px 15px;" id="searchBtn">搜尋</button>
                    </div>
                </div>
                
                <table class="records-table">
                    <thead>
                        <tr>
                            <th>日期</th>
                            <th>銀行</th>
                            <th>券1</th>
                            <th>券2</th>
                            <th>券3</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="recordsBody">
                        <!-- 初始為空 -->
                    </tbody>
                </table>
                
                <div class="pagination">
                    <button class="active">1</button>
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2023 消費券抽獎活動 | 如有疑問，請聯繫客服</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 銀行選擇邏輯
            const bankCards = document.querySelectorAll('.bank-card');
            let selectedBank = null;
            
            bankCards.forEach(card => {
                card.addEventListener('click', function() {
                    bankCards.forEach(c => c.classList.remove('selected'));
                    this.classList.add('selected');
                    selectedBank = this.getAttribute('data-bank');
                });
            });
            
            // 消費券數量選擇邏輯
            const plusButtons = document.querySelectorAll('.quantity-btn.plus');
            const minusButtons = document.querySelectorAll('.quantity-btn.minus');
            
            plusButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    const amount = this.getAttribute('data-amount');
                    const input = document.getElementById(`qty-${amount}`);
                    if (parseInt(input.value) < 3) {
                        input.value = parseInt(input.value) + 1;
                    }
                });
            });
            
            minusButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    const amount = this.getAttribute('data-amount');
                    const input = document.getElementById(`qty-${amount}`);
                    if (parseInt(input.value) > 0) {
                        input.value = parseInt(input.value) - 1;
                    }
                });
            });
            
            // 刪除記錄功能
            const recordsBody = document.getElementById('recordsBody');
            recordsBody.addEventListener('click', function(e) {
                if (e.target.classList.contains('delete-btn')) {
                    if (confirm('確定要刪除這條記錄嗎？')) {
                        const row = e.target.closest('tr');
                        row.remove();
                    }
                }
            });
            
            // 表單提交
            const form = document.getElementById('voucherForm');
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                if (!selectedBank) {
                    alert('請選擇銀行');
                    return;
                }
                
                // 檢查是否選擇了至少一張消費券
                let totalQty = 0;
                const selectedVouchers = [];
                
                document.querySelectorAll('.quantity-input').forEach(input => {
                    const qty = parseInt(input.value);
                    if (qty > 0) {
                        totalQty += qty;
                        const amount = input.id.split('-')[1];
                        for (let i = 0; i < qty; i++) {
                            selectedVouchers.push(amount);
                        }
                    }
                });
                
                if (totalQty === 0) {
                    alert('請選擇至少一張消費券');
                    return;
                }
                
                if (totalQty > 3) {
                    alert('最多只能選擇3張消費券');
                    return;
                }
                
                // 獲取當前日期
                const now = new Date();
                const dateString = now.toISOString().split('T')[0];
                
                // 創建新行
                const newRow = document.createElement('tr');
                
                // 填充券1、券2、券3
                let voucher1 = selectedVouchers[0] ? (selectedVouchers[0] === "無" ? "無" : "¥" + selectedVouchers[0]) : "";
                let voucher2 = selectedVouchers[1] ? (selectedVouchers[1] === "無" ? "無" : "¥" + selectedVouchers[1]) : "";
                let voucher3 = selectedVouchers[2] ? (selectedVouchers[2] === "無" ? "無" : "¥" + selectedVouchers[2]) : "";
                
                newRow.innerHTML = `
                    <td>${dateString}</td>
                    <td>${selectedBank}</td>
                    <td class="voucher">${voucher1}</td>
                    <td class="voucher">${voucher2}</td>
                    <td class="voucher">${voucher3}</td>
                    <td><button class="delete-btn">刪除</button></td>
                `;
                
                // 添加到表格頂部
                recordsBody.insertBefore(newRow, recordsBody.firstChild);
                
                alert(`登記成功！\n銀行: ${selectedBank}\n消費券數量: ${totalQty}張`);
                
                // 重置表單
                bankCards.forEach(c => c.classList.remove('selected'));
                document.querySelectorAll('.quantity-input').forEach(input => {
                    input.value = '0';
                });
                selectedBank = null;
            });
            
            // 搜尋功能
            const searchInput = document.getElementById('searchInput');
            const searchBtn = document.getElementById('searchBtn');
            
            searchBtn.addEventListener('click', function() {
                const searchText = searchInput.value.toLowerCase();
                const rows = document.querySelectorAll('#recordsBody tr');
                
                rows.forEach(row => {
                    const cells = row.querySelectorAll('td');
                    let found = false;
                    
                    cells.forEach(cell => {
                        if (cell.textContent.toLowerCase().includes(searchText)) {
                            found = true;
                        }
                    });
                    
                    row.style.display = found ? '' : 'none';
                });
            });
        });
    </script>
</body>
</html>